<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>小米帐号 -编辑个人信息</title>
    <link href="${pageContext.servletContext.contextPath}/st/front/CSS/reset.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.servletContext.contextPath}/st/front/CSS/layout.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.servletContext.contextPath}/st/front/CSS/modacctip.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.servletContext.contextPath}/images/milogo.png" rel="icon" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/st/front/CSS/date.css" />
    <script src="${pageContext.servletContext.contextPath}/st/front/JS/date.js" type="text/javascript" charset="utf-8"></script>
    <style>
        html {
            overflow-y: scroll;
        }
    </style>

    <style type="text/css">
        /*启用修改头像功能*/
        .na-img-area:hover .na-edit {
            display: block;
            cursor: pointer;
        }

        .na-img-area {
            cursor: default
        }

        /*popup的遮层*/
        .popup_mask {
            position: fixed;
            z-index: 99;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: none;
            _position: absolute;
            _height: 1000px;
        }

        .popup_mask .mod_wrap {
            height: 100%;
            overflow-y: auto;
            position: absolute;
            width: 100%;
            z-index: 1;
        }

        .popup_mask .bkc {
            position: absolute;
            width: 100%;
            height: 200%;
            left: 0;
            top: 0;
            background-color: #333;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }

        .popup_mask .mod_acc_tip {
            display: none;
            position: absolute;
            left: 50%;
            margin-left: -206px;
            top: 50%;
            margin-top: -187px;
            _top: 500px;
        }

        input{
            border:1px solid #d2d2d2;
            background-color:transparent;
        }

        /*干掉该死的IE6的遮罩问题*/
        #loadingMask .bkc {
            _height: 2000px;
        }

        /*wap*/
        .bugfix_ie6 {
            display: block;
        }

        .info_notify {
            display: block;
        }
    </style>
</head>
<body class="zh_CN">
<div class="wrapper blockimportant">
    <div class="wrap">
        <div class="layout bugfix_ie6 dis_none">
            <div class="n-logo-area clearfix">
                <div class="fl-l">
                    <a href="${pageContext.servletContext.contextPath}/index"><img src="${pageContext.servletContext.contextPath}/images/milogo.png"></a>
                    <span class="logo_title">小米帐号</span>
                </div>
                <a class="fl-r logout" href="${pageContext.servletContext.contextPath}/Front_out" id="logoutLink">退出</a>
            </div>
            <!--头像 名字-->
            <div class="n-account-area-box">
                <div class="n-account-area clearfix">
                    <div class="na-info">
                        <p class="na-name">${user.uname}</p>
                        <p class="na-num">${user.pnumber}</p>
                    </div>
                    <div class="na-img-area fl-l">
                        <!--na-img-bg-area不能插入任何子元素-->
                        <div class="na-img-bg-area">
                            <img src="${pageContext.servletContext.contextPath}/images/${user.imagepath}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layout">
            <div class="n-main-nav clearfix">
                <ul class="c_b">
                    <li class="current">
                        <a>修改个人信息</a>
                        <em class="n-nav-corner"></em>
                    </li>
                </ul>
            </div>
            <div class="n-frame">
                <div class="uinfo c_b">
                    <div>
                        <div class="main_l">
                            <div class="naInfoImgBox t_c">
                                <div class="na-img-area marauto">
                                    <!--na-img-bg-area不能插入任何子元素-->
                                    <div class="na-img-bg-area">
                                        <img src="${pageContext.servletContext.contextPath}/images/${user.imagepath}">
                                    </div>
                                    修改头像：<input type="file" style="width: 180px;height: 30px" name="upFile" id="upFile">
                                    <button type="button" id="uploadBtn">上传</button>
                                    <em class="na-edit"></em>
                                </div>
                            </div>
                        </div>
                        <div class="main_r">
                            <div class="framedatabox">
                                <div class="fdata">
                                    <h3>修改个人信息</h3>
                                </div>
                                <div class="fdata lblnickname">
                                    <p>
                                        <span>&emsp;&emsp;昵称：</span>
                                        <span class="value"><input type="text" name="name" placeholder="${user.uname}"></span>
                                    </p>
                                </div>
                                <div class="fdata lblgender">
                                    <p>
                                        <span>&emsp;手机号：</span>
                                        <span class="value">${user.pnumber}</span>
                                    </p>
                                </div>
                                <div class="fdata lblgender">
                                    <p>
                                        <span>&emsp;&emsp;性别：</span>
                                        <span class="value1">
                                            <input type="radio" name="sex" checked value="男"> 男
                                            <input type="radio" name="sex" value="女"> 女
                                        </span>
                                    </p>
                                </div>
                                <div class="fdata lblgender">
                                    <p>
                                        <span>&emsp;&emsp;生日：</span>
                                        <span class="value2" id="date">
                                            <input type="text" value='' placeholder="点击选择时间" id="inputdate" />
                                        </span>
                                    </p>
                                </div>
                                <div class="fdata lblgender">
                                    <button class="update" style="position: absolute;left: 700px;">点击修改</button>
                                </div>
                                <div>
                                    <span id="err" style="position: absolute;left: 700px;top: 500px; ">密码必须大于6位</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="logout_wap log-out">
            <a class="btnadpt bg_white" href="#">退出</a>
        </div>
    </div>
</div>
<div class="n-footer">
    <div class="nf-link-area clearfix">
        <ul class="lang-select-list">
            <li><a class="lang-select-li current" data-lang="zh_CN" href="javascript:void(0)">简体</a>|</li>
            <li><a class="lang-select-li" data-lang="zh_TW" href="javascript:void(0)">繁体</a>|</li>
            <li><a class="lang-select-li" data-lang="en" href="javascript:void(0)">English</a></li>|
            <li><a class="a_critical" href="JavaScript:void(0)" target="_blank"><em></em>常见问题</a></li>
        </ul>
    </div>
    <p class="nf-intro"><span>小米公司版权所有-京ICP备10046444-
					<a class="beianlink beian-record-link" href="#" target="_blank"><span>
                        <img src="${pageContext.servletContext.contextPath}/images/ghs.png">
						</span>京公网安备11010802020134号</a>-京ICP证110507号</span>
    </p>
</div>
<div id="img_cache" style="visibility:hidden;"></div>
</body>
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/st/front/JS/jquery-3.2.1.min.js"></script>
<script>
    //jquery时间插件
    var d = new DateJs({
        inputEl: '#inputdate',
        el: '#date'
    })
    console.log(d)


    function UpdateInfo(name,sex,birthday){
        $.get(
            "${pageContext.servletContext.contextPath}/ajax_Updateinfo",
            {name:name,sex:sex,birthday:birthday},
            function (res){
                $("#err").html(res);
            })
    }

    $(function (){
        $(".update").click(function (){
            var name=$("[name=name]").val();
            var sex=$('input:radio:checked').val();
            var birthday=$("#inputdate").val();
            //alert(name+birthday+sex);
            if(name!=""&&sex!=""&&birthday!=""&&name!=null&&sex!=null&&birthday!=null){
                UpdateInfo(name,sex,birthday);
            }else{
                //alert("俩次输入的密码不正确！");
                $("#err").html("请填写完整");
                console.log("请填写完整");
            }
        });
    })
</script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        var fileSize = 0 ;

        $("#uploadBtn").click(function () {
            //验证图片格式是否正确
            var upFile = $("#upFile") ;
            var fileValue = $(upFile).val() ;
            var extStart = fileValue.lastIndexOf(".");
            var ext = fileValue.substring(extStart, fileValue.length).toUpperCase();
            if (ext != ".PNG" && ext != ".JPG" && ext != ".JPEG") {
                $("#err").html("图片限于png,jpeg,jpg格式");
                $(upFile).val("");
                $(upFile).text("");
                return ;
            }

            var maxSize = 10485760 ;
            if(fileSize > maxSize) {
                $("#err").html("图片大小不得超过10MB");
                $(upFile).val("");
                $(upFile).text("");
                return ;
            }

            //获取上传的文件
            var formData = new FormData();
            formData.append("uploadFile", $("[name='upFile']")[0].files[0]);

            $.ajax({
                url:'${pageContext.servletContext.contextPath}/upload',
                dataType:'json',
                type:'POST',
                data: formData,
                processData : false, // 使数据不做处理
                contentType : false, // 不要设置Content-Type请求头
                success: function(result){
                    if(result.success) {
                        $("#err").css("color","green") ;
                        $("#err").html("上传成功") ;
                    }
                    else {
                        $("#err").html(result.err) ;
                        //清空upFile
                        $(upFile).val("");
                        $(upFile).text("");
                    }
                },
                error:function(response){
                    console.log(response);
                }
            })
        })


        $("#upFile").change(function (e) {
            fileSize = this.files[0].size ;
        })
    })
</script>
</html>


